<template>
  <div class='release-container'>
    <el-row>
      <el-col :span="24"
              class="release-top">
        发布招标
      </el-col>
      <el-col :span="24"
              class="release-step">
        <el-steps :active="active"
                  align-center>
          <el-step title="选择工程范围"></el-step>
          <el-step title="输入招标信息"></el-step>
          <el-step title="发布招标"></el-step>
        </el-steps>
      </el-col>
      <el-col :span="24"
              class="seller-table-main">
        <div v-if="stepOneShow">
          <!-- default-expand-all -->
          <el-table :highlight-current-row='true'
                    :header-cell-style="{background:'#f5f5f5'}"
                    :data='releaseTable.list'
                    row-key="wbs_id"
                    ref="table"
                    class="seller-table"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="checked"
                             width="150">
              <template slot-scope="scope">
                <el-checkbox @change="chooseProject(scope)"
                             v-model="scope.row.checked"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label='序号'
                             align='left'
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.$index+1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop='resolve_no'
                             label='项目编号'
                             align='center'
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop='desc'
                             label='项目wbs'
                             align='center'
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop='aspect'
                             label='特征'
                             align='center'
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label='计量单位'
                             prop='unit'
                             align='center'
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop='number'
                             label='工程数量'
                             align='center'
                             show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <el-col :span="24"
                  align="center">
            <el-button @click="backTo()">取 消</el-button>
            <el-button type="primary"
                       @click="stepTwo()">下一步</el-button>
          </el-col>
        </div>
        <div class="form-box"
             v-if="stepTwoShow">
          <el-form :model="ruleForm"
                   status-icon
                   label-position="left"
                   ref="ruleForm"
                   :rules="rules"
                   label-width="135px"
                   class="demo-ruleForm">
            <el-form-item label="合同名称"
                          class="contract-item"
                          prop="contract_name">

              <div class="content-com"></div>
              <div class="content-area">
                <span>{{project_name}}</span>
                <el-input v-model="ruleForm.contract_name"
                          class="normal_input"
                          placeholder="请输入合同名称，限10个字符"></el-input>
                <span>项目</span>
              </div>
            </el-form-item>
            <el-form-item label="资质要求"
                          class="textarea-item"
                          prop="qualify">
              <el-input type="textarea"
                        class="textarea-input"
                        placeholder="请输入项目资质要求，限400字符"
                        v-model="ruleForm.qualify"
                        maxlength="400"
                        show-word-limit>
              </el-input>
            </el-form-item>
            <el-form-item label="工程量描述"
                          class="textarea-item"
                          prop="desc">
              <el-input type="textarea"
                        class="textarea-input"
                        placeholder="请对工程量进行描述，限400字符"
                        v-model="ruleForm.desc"
                        maxlength="400"
                        show-word-limit>
              </el-input>
            </el-form-item>
            <el-form-item label="招标控制价(万元)"
                          class="textarea-item"
                          prop="year_price">
              <el-input class="price-input"
                        v-model="ruleForm.year_price"
                        placeholder="请输入招标价"></el-input>
            </el-form-item>
          </el-form>
          <el-col :span="24"
                  align="center">
            <el-button @click="backStepOne()">上一步</el-button>
            <el-button type="primary"
                       @click="stepThree('ruleForm')">下一步</el-button>
          </el-col>
        </div>
        <div class="detail-box"
             v-if="stepThreeShow">
          <p class="project-company-name">{{com_name}}</p>
          <div>
            <el-table :header-cell-style="{background:'#f5f5f5'}"
                      :highlight-current-row='true'
                      class="detail-table"
                      :data='detailTable.list'>
              <el-table-column label='序号'
                               align='center'
                               show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.$index+1}}</span>
                </template>
              </el-table-column>
              <el-table-column prop='resolve_no'
                               label='项目编号'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop='desc'
                               label='项目wbs'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop='aspect'
                               label='特征'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop='unit'
                               label='计量单位'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop='number'
                               label='工程数量'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </div>
          <div class="project-company-footer">
            <div class="company-title">合同名称：</div>
            <div class="content">{{ruleForm.contract_name}}</div>
            <div class="company-title">资质要求：</div>
            <div class="content">{{ruleForm.qualify}}</div>
            <div class="company-title">工程量描述：</div>
            <div class="content">{{ruleForm.desc}}</div>
            <div class="company-title">招标控制价(万元)：</div>
            <div class="content">{{ruleForm.year_price}}</div>
            <el-col :span="24"
                    align="center">
              <el-button @click="backStepTwo()">上一步</el-button>
              <el-button type="primary"
                         @click="bidDialogVisible=true">发布招标</el-button>
            </el-col>
          </div>
          <!-- 确定中标弹窗 -->
          <el-dialog title="发布招标"
                     :visible.sync="bidDialogVisible"
                     width="30%"
                     :close-on-click-modal="false"
                     :close-on-press-escape="false"
                     class="bid-dialog">
            <div class="bid-dialog-title">您确定发布招标？</div>
            <span slot="footer"
                  class="dialog-footer footer-box">
              <el-button @click="bidDialogVisible = false">取 消</el-button>
              <el-button type="primary"
                         @click="stepComplete()">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import { ReleaseSellerApi } from '@/services/ResourceCentre'
export default {
  data () {
    var checkName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入合同名称'));
      } else if ((/^[\s　]|[ ]$/gi).test(value)) {
        callback(new Error('请输入正确的合同名称'));
      } else {
        callback();
      }
    };
    var checkQualify = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入项目资质要求'));
      } else if ((/^[\s　]|[ ]$/gi).test(value)) {
        callback(new Error('请输入正确的项目资质要求'));
      } else {
        callback();
      }
    };
    var checkPrice = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入招标控制价'));
      } else if (!(/^[1-9][0-9]*([.][0-9]+)?$/).test(value)) {
        callback(new Error('请输入正确的招标控制价'));
      } else {
        callback();
      }
    };
    var checkDesc = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入工程量描述'));
      } else if ((/^[\s　]|[ ]$/gi).test(value)) {
        callback(new Error('请输入正确的工程量描述'));
      } else {
        callback();
      }
    };
    return {
      uuid: "",
      project_id: "",
      active: 1,
      stepOneShow: true,
      stepTwoShow: false,
      stepThreeShow: false,
      releaseTable: {
        list: [],
        total_page: 0,
        total_count: 0
      },
      ruleForm: {
        contract_name: "",
        qualify: "",
        desc: "",
        year_price: ""
      },
      rules: {
        contract_name: [
          { required: true, validator: checkName, trigger: 'blur' }
        ],
        qualify: [
          { required: true, validator: checkQualify, trigger: 'blur' }
        ],
        desc: [
          { required: true, validator: checkDesc, trigger: 'blur' }
        ],
        year_price: [
          { required: true, validator: checkPrice, trigger: 'blur' }
        ],
      },
      detailTable: {
        list: [
          {
            no: "1",
            project_no: "00452",
            wbs: "大江东项目A区",
            feature: "",
            unit: "m³",
            project_num: "1.200"
          }
        ]
      },
      detailForm: {
        contract_name: "大江东温馨小区A区项目",
        qualify: "本次招标要求投标人具 资质的企业、具备建设行政主管部门核发的防腐保温工程专业承包三级及以上资质证书；信誉要求：未处于财产被接管、冻结、破产状态，未处于四川省行政区域内有关行政处罚期间。",
        year_price: "705.124万",
        desc: "构件数2893m³   叠合板228m³     外墙板741m³"
      },
      bidDialogVisible: false,//确定发布招标弹窗
      multipleSelection: "",
      project_name: "",
      com_name: "",
      saveData: [],
      idArr: [],
    }
  },
  methods: {
    handlePageChange (page) {

    },
    //获取树形表格数据 <-----------------------------------分割线--------------------------------->
    getTreeTable () {
      ReleaseSellerApi.getProList({
        params: {
          project_id: this.project_id
        }
      }).then(res => {
        this.releaseTable.list = res.data
        this.project_name = res.data[0].project_name
        this.$nextTick(() => {
          this.handleData(this.releaseTable.list)
        })
      }, err => {
        console.log(err)
      })
    },
    // 递归处理数据，添加checked属性
    handleData (list) {
      if (Object.prototype.toString.call(list) === '[object Array]') {
        list.map((item) => {
          this.$set(item, 'checked', false)
          this.$set(item, 'unit', item.bid_wbs.unit)
          this.$set(item, 'aspect', item.bid_wbs.aspect)
          this.$set(item, 'number', item.bid_wbs.number)
          this.$set(item, 'resolve_no', item.bid_wbs.resolve_no)
          if (item.children) {
            this.handleData(item.children)
          }
          if (item.bid_wbs) {
            this.handleData(item.bid_wbs)
          }
        })
      }
    },
    // 递归处理，将该元素所属的子元素也置为选中或取消选中
    setChecked (list, isChecked) {
      if (Object.prototype.toString.call(list) === '[object Array]') {
        list.map((item) => {
          item.checked = isChecked
          if (item.children) {
            this.setChecked(item.children, isChecked)
          }
        })
      }
    },
    chooseProject (scope) {
      if (scope.row.checked) {
        this.setChecked(scope.row.children, true)
      } else {
        this.setChecked(scope.row.children, false)
      }

    },
    //获取保存的数据
    saveTableData (list) {
      if (Object.prototype.toString.call(list) === '[object Array]') {
        list.map((item) => {
          if (item.children) {
            this.saveTableData(item.children)
          }
          if (item.checked === true) {
            this.saveData.push(item)
            this.idArr.push(item.wbs_id)
          }
        })
      }
    },
    backTo () {
      this.$router.push({ path: '/SellerMarket', query: { project_id: this.project_id } })
    },
    //点击下一步进入到第二步操作
    stepTwo () {
      this.saveTableData(this.releaseTable.list)
      // console.log(this.saveData, this.idArr, this.idArr.join(','))
      if (this.saveData.length != 0) {
        this.active = 2
        this.stepOneShow = false
        this.stepTwoShow = true
        this.stepThreeShow = false
      } else {
        this.$message.error('请选择项目！')
      }

    },
    //点击上一步返回到第一步操作页面
    backStepOne () {
      this.saveData.splice(0, this.saveData.length)//重置数组为空
      this.idArr.splice(0, this.idArr.length)
      this.active = 1
      this.stepOneShow = true
      this.stepTwoShow = false
      this.stepThreeShow = false
    },
    //点击下一步，进入第三部操作页面
    stepThree (ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.active = 3
          this.stepOneShow = false
          this.stepTwoShow = false
          this.stepThreeShow = true
          this.detailTable.list = this.saveData
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    //点击上一步，返回到第二部操作页面
    backStepTwo () {
      this.active = 2
      this.stepOneShow = false
      this.stepTwoShow = true
      this.stepThreeShow = false
    },
    //确定发布招标
    stepComplete () {
      this.ruleForm.contract_name = this.project_name + this.ruleForm.contract_name + '项目';
      ReleaseSellerApi.releaseSell({
        params: {
          project_id: this.project_id,
          contract_name: this.ruleForm.contract_name,
          max_amount: this.ruleForm.year_price,
          qual_info: this.ruleForm.qualify,
          load_info: this.ruleForm.desc,
          wbs_id: this.idArr.join(',')
        }
      }).then(res => {
        if (res.code == '1') {
          this.bidDialogVisible = false
          this.$message({
            message: '发布成功',
            type: 'success'
          });
          this.$router.push({ path: '/SellerMarket', query: { project_id: this.project_id } })
        }
      }, err => {
        console.log(err)
      })
    }
  },
  created () {
    this.project_id = this.$route.query.project_id
    this.getTreeTable();
  },
  mounted () {

  }
}
</script>
<style scoped lang='scss'>
.release-container {
  background: #fff;
  .release-top {
    font-size: 16px;
    color: #1441b3;
    padding: 20px;
    border-bottom: 1px solid #d9d9d9;
  }
  .release-step {
    padding: 40px 288px 50px 288px;
  }
  .seller-table-main {
    padding: 0 96px;
    padding-bottom: 20px;
    .seller-table {
      margin-bottom: 20px;
    }
    .form-box {
      padding: 0 275px;
      .contract-item {
        /deep/ .el-form-item__error {
          top: 90%;
          left: 12%;
        }
        /deep/ .el-form-item__content {
          width: 100%;
          margin-left: 0px !important;
        }
        /deep/ .el-form-item__label {
          font-size: 14px;
          color: #333;
          font-weight: bold;
        }
      }
      .content-area {
        width: 100%;
        margin-bottom: 10px;
      }
      .content-com {
        padding: 0 15px;
        height: 40px;
      }
      .normal_input {
        width: 50%;
      }

      .textarea-item {
        /deep/ .el-form-item__content {
          width: 100%;
          margin-left: 0px !important;
        }
        /deep/ .el-form-item__label {
          font-size: 14px;
          color: #333;
          font-weight: bold;
        }
      }
      .textarea-input {
        /deep/ .el-textarea__inner {
          width: 100%;
          height: 96px;
          min-height: 96px;
        }
      }
    }
    .detail-box {
      padding: 0 100px;
      .project-company-name {
        text-align: center;
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
      .project-company-footer {
        .company-title {
          font-size: 14px;
          color: #333;
          font-weight: bold;
          line-height: 21px;
        }
        .content {
          font-size: 14px;
          color: #666;
          line-height: 21px;
          margin-bottom: 10px;
        }
      }
      .detail-table {
        margin-bottom: 20px;
      }
      .detail-ruleForm {
        .content {
          line-height: 20px;
          padding: 10px 0px;
        }
      }
      .bid-dialog {
        /deep/ .el-dialog {
          border-radius: 12px;
          /deep/ .el-dialog__title {
            font-size: 16px;
            color: #333;
          }
          /deep/ .el-dialog__footer {
            text-align: center;
          }
          .bid-dialog-title {
            font-size: 16px;
            color: #333;
          }
        }
      }
    }
  }
}
</style>
